<!-- 银证转出 -->
<template>
	<view class="to-container">
		<tui-input
			padding="36rpx 0"
			placeholderStyle="color: #F74E51"
			disabled
			:lineLeft="false"
			:size="30"
			:labelSize="32"
			label="T+1资金"
			textRight
			:placeholder="(cuserinfo.freeze_profit) > 0 ? (cuserinfo.freeze_profit) : '￥0.00'"
			class="input-tt"
		/>
		<tui-input
			padding="36rpx 0"
			placeholderStyle="color: #2F384A"
			disabled
			:lineLeft="false"
			:size="30"
			:labelSize="32"
			label="可转出金额"
			textRight 
			:placeholder="(cuserinfo.balance - cuserinfo.freeze_profit).toFixed(2) > 0 ? (cuserinfo.balance - cuserinfo.freeze_profit).toFixed(2) : '￥0.00'"
			class="input-tt"
		/>
		<tui-input
			:modelValue="bankCard ? bankCard.account : ''"
			padding="36rpx 0"
			disabled
			:lineLeft="false"
			:size="30"
			:labelSize="32"
			label="银行卡"
			textRight
			placeholder="去绑定银行卡"
			class="input-tt"
		>
			<template #right>
				<tui-icon slot="right" name="arrowright" :size="16" @click="gotobank"></tui-icon>
			</template>
		</tui-input>
		<tui-input
			v-model="money"
			padding="36rpx 0"
			:lineLeft="false"
			:size="30"
			:labelSize="32"
			label="转出金额"
			textRight
			placeholder="转出金额"
			class="input-tt"
		>
			<template #right>
				<text>¥</text>
			</template>
		</tui-input>
		<view class="to-mtm">
			* 最小转出金额{{ config?.min_tx_money || '' }}
		</view>
		<tui-button
			:loading="submiting"
			:disabled="bankCard == null || money == '' || submiting"
			height="96rpx"
			margin="50rpx 0 0 0"
			shape="circle"
			:size="32"
			@click="submitFn"
			style="background: linear-gradient( 178deg, #FF7E3E 0%, #F62645 100%) !important;"
		>转出</tui-button>
	</view>
</template>

<script setup>
import {ref, onMounted} from 'vue';

// api
import {capitalLog, bankList, applyWithdraw} from '@/api/user.js';

// props
const props = defineProps({
	config: {
		type: Object,
		default: () => {}
	}
});

// emits
const emits = defineEmits(['submit']);

// 银行卡
const bankCard = ref(null);

onMounted(() => {
	upCallback();
		
	bankList().then(res => {
		if(res.data.list.data.length){
			bankCard.value = res.data.list.data[0];
		}
	});
});

const cuserinfo = ref({});

const upCallback = () => {
	capitalLog({
		size: 1,
		page: 100,
		type: 1
	}).then(res => {
		console.log(res);
		if(res.code == 1){
			cuserinfo.value = res.data.userInfo;
		}
	})
};

// 跳转银行卡列表页
const gotobank = () => {
	uni.redirectTo({
		url: '/pages/bankList/index'
	});
};

const money = ref('');
const submiting = ref(false);
// 转出方法
const submitFn = () => {
	submiting.value = true;
	
	emits('submit', {
		type: 'out',
		data: {
			'account_id': bankCard.value.id,
			money: money.value
		}
	});
};

const unsbumiting = () => {
	submiting.value = false;
};

defineExpose({unsbumiting});
</script>

<style lang='scss' scoped>
.to-container {
	width: 100%;
	height: 100%;
	padding: 0 18rpx;
	box-sizing: border-box;
	
	::v-deep(.input-tt) {
		.tui-input__wrap {
			justify-content: space-between;
			
			text {
				font-weight: bold;
			}
		}
	}
	
	.to-mtm {
		margin-top: 16rpx;
		color: #8F8F8F;
		font-size: 26rpx;
		font-weight: 400;
		font-family: PingFangSC, PingFang SC;
		text-align: right;
	}
}
</style>